import 'package:flutter/material.dart';

/// 构建一个带标题和关闭按钮的头部组件
///
/// - 左侧显示图标和标题信息
/// - 右侧提供关闭按钮
/// - 常用于弹窗或设置面板顶部
Widget buildHeader(BuildContext context, TextStyle? titleStyle) {
  final cs = Theme.of(context).colorScheme;

  return Padding(
    padding: const EdgeInsets.symmetric(horizontal: 12.0, vertical: 10.0),
    child: Row(
      children: [
        /// 左侧小图标（带背景色的方形）
        Container(
          width: 36,
          height: 36,
          decoration: BoxDecoration(
            borderRadius: BorderRadius.circular(6),
            color: cs.primary.withOpacity(0.1), // 背景色为主题主色的浅色
          ),
          child: Icon(
            Icons.developer_mode,
            size: 20,
            color: cs.primary, // 图标使用主题主色
          ),
        ),
        const SizedBox(width: 12),

        /// 标题 + 副标题
        Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            // 主标题
            Text('SDK Settings', style: titleStyle),

            const SizedBox(height: 2),

            // 副标题/描述
            Text(
              'Configure SDKs for this project',
              style: Theme.of(context).textTheme.bodySmall,
            ),
          ],
        ),

        const Spacer(), // 撑开布局，让关闭按钮靠右对齐

        /// 关闭按钮（点击后关闭当前路由/弹窗）
        IconButton(
          tooltip: 'Close',
          onPressed: () => Navigator.of(context).pop(),
          icon: const Icon(Icons.close),
        ),
      ],
    ),
  );
}
